
<script type="text/javascript" src="js_files/header.js"></script> 


<div class="header_menu">
    <#if loggedin>    
    <div style="float: right; margin-right: 5px;">
        Welcome ${nickname}
    </div>
    <div style="margin-left: 5px">
        <a href="?request=logout" class="header_hyperlink">logout</a>
    </div>
    <#else>        
    <div style="margin-left: 5px">
        <a href="javascript:loginClick()" class="header_hyperlink">login</a>
        <a href="javascript:registerClick()" class="header_hyperlink">Register</a>
    </div>
    </#if>   
</div>
<div class="header">    
    <div class="header_text">
        <h1>Renju</h1>
    </div>
</div>

<div id="registration_successful_dialog_form" title="Registration successfull" style="display: none;">
    <p>
        The registration was successful. 
    </p>	
</div>

<div id="registration_dialog_form" style="display: none;">
    <label class="validation" id="registrationError"></label>
    <form action="?request=registred" onsubmit="return validateForm();" method="post" name="registration">
        <table>
            <tr>
                <td>Email</td>
                <td>
                    <input type="text" name="email" class="text ui-widget-content ui-corner-all"/>
                </td>
                <td>
                    <label class="validation" id="emailError" ></label>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" name="password" class="text ui-widget-content ui-corner-all"/>
                </td>
                <td>
                    <label class="validation" id="passwordError"></label>
                </td>
            </tr>
            <tr>
                <td>Retype Password</td>
                <td>
                    <input type="password" name="rePassword" class="text ui-widget-content ui-corner-all"/>
                </td>
                <td>
                    <label class="validation" id="rePasswordError"></label>
                </td>
            </tr>
            <tr>
                <td>Nickname</td>
                <td>
                    <input type="text" name="nickname" class="text ui-widget-content ui-corner-all"/>
                </td>
                <td>
                    <label class="validation" id="nicknameError"></label>
                </td>
            </tr>
            <tr>
                <td>Security Question</td>
                <td>
                    <select name="securityQuestion" class="text ui-widget-content ui-corner-all">
                        <#list securityQuestions as sq>
                        <option>${sq}</option>                                
                        </#list>                              
                    </select>
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>Security Question Answer</td>
                <td>
                    <input type="text" name="securityQuestionAnswer" class="text ui-widget-content ui-corner-all"/>
                </td>
                <td>
                    <label class="validation" id="answerError"></label>
                </td>
            </tr>
        </table>

    </form>      
</div>

<div id="login_dialog_form" style="display: none;">
    <label class="validation">${loginError}</label>
    <form name="login">
        <table>
            <tr>
                <td>Email</td>
                <td>
                    <input type="text" name="email" class="text ui-widget-content ui-corner-all">
                </td>
                <td>
                    <label class="validation" id="emailError" ></label>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" name="password" class="text ui-widget-content ui-corner-all">
                </td>
                <td></td>
            </tr>
        </table>        
    </form>
</div>

<div id="profile_dialog_form" title="Profile">

</div>